<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width">
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
	    <link rel="stylesheet" type="text/css" href="css/new_file.css"/>
	    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
	    <link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
	    <script src="flexible/flexible.debug.js"></script>
	    <script src="flexible/flexible_css.debug.js"></script>
	</head>
	<body>
		
	    <!--头部-->
		<div class="header">
			<div class="left">
				<span class="weixin"><img src="img/images/weixin.png"/></span>
			</div>
			<div class="center">
				<p>分类</p>
			</div>
			<div class="right">
				<span class="sousuo"><img src="img/images/sousuo.png"/></span>
				<span class="quan"><img src="img/images/quan.png" class="youtu"/></span>
			</div>
		</div>
		<!--轮播图-->
		<div id="myCarousel" class="carousel slide">
	    <!-- 轮播（Carousel）指标 -->
	    <ol class="carousel-indicators">
	        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
	        <li data-target="#myCarousel" data-slide-to="1"></li>
	        <li data-target="#myCarousel" data-slide-to="2"></li>
	    </ol>   
	    <!-- 轮播（Carousel）项目 -->
	    <div class="carousel-inner">
	        <div class="item active">
	            <img src="img/images/lunbo.png" alt="Second slide"/>
	        </div>
	        <div class="item">
	           <img src="img/images/lunbo.png" alt="Second slide"/>
	        </div>
	        <div class="item">
	           <img src="img/images/lunbo.png" alt="Second slide"/>
	        </div>
	    </div>
	      <!-- 轮播（Carousel）导航 -->
	    <a class="carousel-control left" href="#myCarousel" 
	        data-slide="prev">
	    </a>
	    <a class="carousel-control right" href="#myCarousel" 
	        data-slide="next">
	    </a>
	 </div>
	 <!--类型-->
	 <div class="option">
	 	<dl>
	 		<dt><img src="img/images/img1.png"/></dt>
	 		<dd>红心平台</dd>
	 	</dl>
	 	<dl>
	 		<dt><img src="img/images/img2.png"/></dt>
	 		<dd>音乐</dd>
	 	</dl>
	 	<dl>
	 		<dt><img src="img/images/img3.png"/></dt>
	 		<dd>视频</dd>
	 	</dl>
	 	<dl>
	 		<dt><img src="img/images/img4.png"/></dt>
	 		<dd>铃声</dd>
	 	</dl>
	 	<dl>
	 		<dt><img src="img/images/img5.png"/></dt>
	 		<dd>排行版</dd>
	 	</dl>
	 </div>
	 <!--选择-->
	  <div class="easys">
	  	<div class="recreation">
	  		<div class="zuo">
	  			<p>每日音乐签</p>
	  		</div>
	  		<dl>
	  			<dt class="epi1"><img src="img/images/lvquan.png"/></dt>
	  			<dt class="epi2"><img src="img/images/datu1.png"/></dt>
	  			<dd>连续签到第一天</dd>
	  		</dl>
	  	</div>
	  	<div class="recreation">
	  		<div class="zuo">
	  			<p>系统消息</p>
	  		</div>
	  		<dl>
	  			<dt class="epi1"><img src="img/images/lvquan.png"/></dt>
	  			<dt class="epi2"><img src="img/images/datu2.png"/></dt>
	  			<dd>36条未读</dd>
	  		</dl>
	  	</div>
	  	<div class="youbian">
	  		<div class="zuo1">
	  			<p>附近的人</p>
	  		</div>
	  		<dl class="youb1">
	  			<dt class="epi1"><img src="img/images/lvquan.png"/></dt>
	  			<dt class="epi2">
	  				<span><img src="img/images/首页推荐-长页_04.png"/></span>
	  				<span><img src="img/images/首页推荐-长页_07.png"/></span>
	  				<span><img src="img/images/首页推荐-长页_03.png"/></span>
	  				<span><img src="img/images/首页推荐-长页_08.png"/></span>
	  			</dt>
	  			<dd>发现附近的人</dd>
	  		</dl>
	  	</div>
	  </div>
		<!--热门新碟榜-->	
	  <div class="diebang">
	  	<div class="wenzi">
	  		<p>热门新碟榜</p>
	  		<p class="huise">更多</p>
	  	</div>
	  	<dl>
	  		<dt><img src="img/images/die1.png"/></dt>
	  		<dd>Sacred</dd>
	  		<dt class="dts"><img src="img/images/xing.png"/></dt>
	  	</dl>
	  	<dl>
	  		<dt><img src="img/images/bie2.png"/></dt>
	  		<dd>Groupie</dd>
	  		<dt class="dts"><img src="img/images/xing.png"/></dt>
	  	</dl>
	  	<dl>
	  		<dt><img src="img/images/bie3.png"/></dt>
	  		<dd>Rich Love</dd>
	  		<dt class="dts"><img src="img/images/xing.png"/></dt>
	  	</dl>
	  	<dl>
	  		<dt><img src="img/images/die4.png"/></dt>
	  		<dd>24:35</dd>
	  		<dt class="dts"><img src="img/images/xing.png"/></dt>
	  	</dl>
	  	<dl>
	  		<dt><img src="img/images/die5.png"/></dt>
	  		<dd>YACHT</dd>
	  		<dt class="dts"><img src="img/images/xing.png"/></dt>
	  	</dl>
	  	<dl>
	  		<dt><img src="img/images/die6.png"/></dt>
	  		<dd>Ultralife</dd>
	  		<dt class="dts"><img src="img/images/xing.png"/></dt>
	  	</dl>
	  </div>
	  <!--热门名人-->
	  <div class="celebrity">
	  	<div class="celebrity-top">
	  		<p>热门名人</p>
	  		<p class="huise">更多</p>
	  	</div>
	  	<dl>
	  		<dt><img src="img/images/deng1.png"/></dt>
	  		<dd>邓紫棋</dd>
	  	</dl>
	  	<dl>
	  		<dt><img src="img/images/deng2.png"/></dt>
	  		<dd>陈粒</dd>
	  	</dl>
	  	<dl>
	  		<dt><img src="img/images/deng3.png"/></dt>
	  		<dd>张大伟</dd>
	  	</dl>
	  	<dl>
	  		<dt><img src="img/images/deng4.png"/></dt>
	  		<dd>周杰伦</dd>
	  	</dl>
	  	<dl>
	  		<dt><img src="img/images/deng5.png"/></dt>
	  		<dd>血之谦</dd>
	  	</dl>
	  	<dl>
	  		<dt><img src="img/images/deng6.png"/></dt>
	  		<dd>田馥甄</dd>
	  	</dl>
	  	<dl>
	  		<dt><img src="img/images/deng7.png"/></dt>
	  		<dd>陈奕迅</dd>
	  	</dl>
	  	<dl>
	  		<dt><img src="img/images/deng8.png"/></dt>
	  		<dd>郁可唯</dd>
	  	</dl>
	  </div>
	  <!--热门视频-->
	  <div class="video">
	  	<div class="video-top">
	  		<p>热门视频</p>
	  		<p class="huise">更多</p>
	  	</div>
	  	
	  	<!--<div class="bofang">
	  		<div class="bo-left">
	  			<img src="img/images/shipin1.png"/>
	  		</div>
	  		<h3>最美人声半凑合唱</h3>
	  		<p class="guan1">26.32万人关注</p>
	  		<h4 class="guan2">1.贝加尔湖畔</h4>
	  		<p class="guan3">寻人声音乐团</p>
	  		<h4 class="guan4">2.老外纯人声翻唱</h4>
	  		<p class="guan5">羊大刚</p>
	  	</div>-->
	  </div>
	  <!--尾部-->
	  <div class="tail">
	  	<ul>
	  		<li><a href="sytuichu.htmll"><img src="img/images/首页.png"/></a></li>
	  		<li><a href="liupai.html"><img src="img/images/Category.png"/></a></li>
	  		<li><a href="index.html"><img src="img/images/add.png"></a></li>
	  		<li><a href="haoyouquan.html"><img src="img/images/atm-away.png"></a></li>
	  		<li><a href="wode.html"><img src="img/images/account.png"></a></li>
	  	</ul>
	  </div>
	  
	  
		<script src="js/jquery-3.2.1.js"></script>
		<script src="js/bootstrap.js"></script>
		<script src="js/swiper.js"></script>
		
		
		<script type="text/javascript">
			var video = document.getElementsByClassName('video')[0];
			function all(){
				var xhr;
				if(window.XMLHttpRequest){
					xhr=new XMLHttpRequest();
				}else{
					xhr=new ActiveXObject("Microsoft.XMLHTTP");
				}
				xhr.open("GET","json/diaoyong.json")
				xhr.onreadystatechange=function(){
					if(xhr.readyState===4&&xhr.status===200){
						var _html="";
						var res=JSON.parse(xhr.responseText)
						for(var i=0;i<res.length;i++){
							_html+='<div class="bofang"><div class="bo-left"><img src="'+res[i].imgurl+'"/></div><h3>'+res[i].name+'</h3><p class="guan1">'+res[i].inner+'</p><h4 class="guan2">'+res[i].num+'</h4><p class="guan3">'+res[i].spone+'</p><h4 class="guan4">'+res[i].sptwo+'</h4><p class="guan5">'+res[i].chuang+'</p></div>';
						}
						video.innerHTML +=_html;
					}
				}
				xhr.send();
			}
			all();
		</script>
		
		
		
		
	</body>
</html>
